<template>
	<view class="footer Column">
		<view v-for="(item, index) in menuItems" :key="index" class="contentBox Row" @click="handleItemClick(item)">
			<view class="Row">
				<text class="iconfont" :style="{ fontSize: item.iconSize || '48rpx' }">{{ iconfont(item.icon) }}</text>
				{{ item.label }}
			</view>
			<u-icon name="arrow-right" color="#919191" size="16"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: "mineMenu",
		props: {
			// 是否需要登录验证
			requireLogin: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {
				// 菜单数据
				menuItems: [{
						icon: '&#xe609;',
						label: "全部订单",
						url: "./allOrders/allOrders",
					},
					{
						icon: "&#xe78e;",
						label: "地址管理",
						url: "/pages/mine/shipAddress/shipAddress",
					},
					{
						icon: "&#xe645;",
						label: "业绩明细",
						url: "/pages/mine/withdraw/record/record",
					},
					{
						icon: "&#xe66c;",
						label: "业务数据",
						url: "/pages/mine/businessData/businessData",
					},
					{
						icon: "&#xe60f;",
						label: "收益数据",
						url: "/pages/mine/revenueData/revenueData",
					},
					{
						icon: "&#xe627;",
						label: "团队数据",
						url: "/pages/mine/teamData/teamData",
					},
					{
						icon: "&#xe70e;",
						label: "团队业绩",
						url: "/pages/mine/Achievememt/Achievememt",
					},
					{
						icon: "&#xe61b;",
						label: "邀请二维码",
						handler: "inviterQrcode", // 自定义方法名
					}
				],
			}
		},
		methods: {
			// iconfon编码转换
			iconfont(icon) {
				const reg = /(&#x)?(.*)/
				let iconfontName
				if (reg.test(icon)) {
					iconfontName = reg.exec(icon)[2]
				}
				return String.fromCharCode(parseInt(iconfontName, 16))
			},
			/* 点击菜单项时的处理逻辑 */
			handleItemClick(item) {
				const token = uni.getStorageSync('token');

				if (item.url) {
					if (this.requireLogin && !token) {
						return uni.$u.toast("请登录后操作");
					}
					uni.navigateTo({
						url: item.url,
					});
				} else if (item.handler) {
					this[item.handler]();
				}
			},

			/* 打开联系客服页面 */
			open() {
				// 实现具体的客服逻辑
				const parent = this.$parent.$parent;
				// console.log(that.$parent.$parent.open())
				parent.open()
				uni.$u.http.post('/user/customer_service').then(res => {
					parent.serviceList = res.data;
				}).catch(err => console.log(err.msg))
			},

			/* 关于我们页面 */
			AboutUs() {
				// 实现具体的关于我们的逻辑
				uni.navigateTo({
					url: "./AboutUs/AboutUs"
				})
			},

			/* 邀请人二维码 */
			inviterQrcode() {
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.$u.toast("请登录后操作");
					return;
				}
				this.getUserInfo();
			},

			getUserInfo() {
				let that = this;
				uni.$u.http.post('/user/getUserInfo').then(res => {
					let userId = res.data.userinfo.group.id;
					// console.log(userId)
					if (userId == 1) {
						uni.$u.toast("您还未获取推广资格，请升级会员");
						return;
					}

					uni.navigateTo({
						url: "/pages/mine/inviterQrcode/inviterQrcode",
					})
				}).catch(err => {
					console.log(err)
				})
			},
		},
	};
</script>

<style lang="scss">
	/* 引入iconfont图标 */
	@import "@/static/iconfont/iconfont.css";

	.footer {
		flex: 1;
		border-radius: 16rpx;
		background-color: #fcfcfc;
		box-shadow: 8rpx 8rpx 20rpx #e6e6e6;
		padding: 0 20rpx;
		z-index: 1;

		.contentBox {
			justify-content: space-between;
			font-size: 32rpx;
		}

		.unread {
			position: absolute;
			right: 26rpx;
			top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 30rpx;
			height: 30rpx;
			border-radius: 15rpx;
			background-color: red;
			font-size: 24rpx;
			color: #fff;
		}

		.iconfont {
			color: black;
			font-size: 44rpx;
			padding: 24rpx;
		}
	}
</style>